<!DOCTYPE html>
<html ng-app="myApp" style="height: 100%">
<head lang="en">
    <meta charset="UTF-8">
    <title>tree</title>
    <link rel="stylesheet" href="../../themes/default/wi-all.css" />
</head>
<body ng-controller="mainCtrl" ng-cloak>

<div style="width: 90%;margin: 0 auto;padding-top: 5px;height:100%;">

    <strong>简单示例：</strong><br/>
    <wi-datepicker ng-model="date1"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date1">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date1}}<hr/>

    <strong>周显示：</strong><br/>
    <wi-datepicker ng-model="date2" isShowWeek="true"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date2" isShowWeek="true">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date2}}<hr/>

    <strong>只读：</strong><br/>
    <wi-datepicker ng-model="date3" readOnly="true"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date3" readOnly="true">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date3}}<hr/>

    <strong>高亮周末：</strong><br/>
    <wi-datepicker ng-model="date4" highLineWeekDay="true"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date4" highLineWeekDay="true">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date4}}<hr/>

    <strong>操作按钮自定义：</strong><br/>
    <wi-datepicker ng-model="date5" isShowClear="false" isShowToday="false"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date5" isShowClear="false" isShowToday="false">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date5}}<hr/>

    <strong>自定义星期的第一天：</strong><br/>
    <wi-datepicker ng-model="date6" firstDayOfWeek="1"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date6" firstDayOfWeek="1">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date6}}<hr/>

    <strong>起始日期1：</strong><br/>
    当日期框为空值时,将使用 2000-10-12 做为起始日期<br/>
    <wi-datepicker ng-model="date99" startDate="2000-10-12"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date99" startDate="2000-10-12">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date99}}<hr/>

    <strong>起始日期2：</strong><br/>
    无论日期框是否为空,都将使用 2000-10-12 做为起始日期<br/>
    <wi-datepicker ng-model="date7" startDate="2000-10-12" alwaysUseStartDate="true"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date7" startDate="2000-10-12" alwaysUseStartDate="true">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date7}}<hr/>

    <strong>起始日期3：</strong><br/>
    动态参数(如:%y,%M分别表示当前年和月)。起始日期为当前当月1日<br/>
    <wi-datepicker ng-model="date8" startDate="%y-%M-01" alwaysUseStartDate="true"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date8" startDate="%y-%M-01" alwaysUseStartDate="true">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date8}}<hr/>

    <strong>自定义格式：</strong><br/>
    <wi-datepicker ng-model="date98" dateFmt="yyyy年MM月dd日 HH时mm分ss秒" style="width: 300px"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date98" dateFmt="yyyy年MM月dd日 HH时mm分ss秒" style="width: 300px">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date98}}<hr/>

    <strong>取得系统可识别的日期值：</strong><br/>
    <wi-datepicker ng-model="date97" dateFmt="yyyy年M月d日" vel="realDate"></wi-datepicker>
    真实的日期是：<input type="text" id="realDate"/><br/>
    代码："&lt;wi-datepicker ng-model="date97" dateFmt="yyyy年M月d日" vel="realDate">&lt;/wi-datepicker>"<br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"&lt;input type="text" id="realDate"/>"<br/>
    选择的日期是：{{date97}}<hr/>

    <strong>自定义皮肤：</strong><br/>
    <wi-datepicker ng-model="date9" skin="whyGreen"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date9" skin="whyGreen">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date9}}<hr/>

    <strong>日期范围限制1：</strong><br/>
    限制日期的范围是 2006-09-10到2008-12-20<br/>
    <wi-datepicker ng-model="date96" minDate="2006-09-10" maxDate="2008-12-20"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date96" minDate="2006-09-10" maxDate="2008-12-20">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date96}}<hr/>

    <strong>日期范围限制2：</strong><br/>
    限制时间的范围是 8:00:00 到 11:30:00<br/>
    <wi-datepicker ng-model="date95" dateFmt="H:mm:ss" minDate="8:00:00" maxDate="11:30:00"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date95" dateFmt="H:mm:ss" minDate="8:00:00" maxDate="11:30:00">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date95}}<hr/>

    <strong>日期范围限制3：</strong><br/>
    动态限制,你可以通过系统给出的动态变量,如%y(当前年),%M(当前月)等来限度日期范围,你还可以通过{}进行表达式运算,如:{%d+1}:表示明天<br/>
    1)只能选择今天以前的日期(包括今天)<br/>
    <wi-datepicker ng-model="date95" maxDate="%y-%M-%d"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date95" maxDate="%y-%M-%d">&lt;/wi-datepicker>"<br/>
    2)只能选择今天以后的日期(不包括今天)<br/>
    <wi-datepicker ng-model="date95" minDate="%y-%M-{%d+1}"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date95" minDate="%y-%M-{%d+1}">&lt;/wi-datepicker>"<br/>
    3)只能选择本月<br/>
    <wi-datepicker ng-model="date94" minDate="%y-%M-01" maxDate="%y-%M-%ld"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date94" minDate="%y-%M-01" maxDate="%y-%M-%ld">&lt;/wi-datepicker>"<br/>
    4)前面的日期不能大于后面的日期 且 两个日期都不能大于今天<br/>
    <wi-datepicker ng-model="date93" id="d1" maxDate="#F{$dp.$D(\'d2\')||\'%y-%M-%d\'}"></wi-datepicker>
    ~<wi-datepicker ng-model="date92" id="d2" minDate="#F{$dp.$D(\'d1\')}" maxDate="%y-%M-%d"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date93" id="d1" maxDate="#F{$dp.$D(\'d2\')||\'%y-%M-%d\'}">&lt;/wi-datepicker>"<br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    "&lt;wi-datepicker ng-model="date92" id="d2" minDate="#F{$dp.$D(\'d1\')}" maxDate="%y-%M-%d"}">&lt;/wi-datepicker>"<hr/>

    <strong>无效天：</strong><br/>
    禁用周日至周六所对应的日期,(0至6 分别代表 周日至周六)<br/>
    <wi-datepicker ng-model="date91" disabledDays="[0,6]"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date91" disabledDays="[0,6]">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date91}}<hr/>

    <strong>事件处理：</strong><br/>
    <wi-datepicker ng-model="date90" onPicked="onPickedHandler" onCleared="onClearedHandler"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date90" onPicked="onPickedHandler" onCleared="onClearedHandler">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date90}}<hr/>

    <strong>禁用快速选择：</strong><br/>
    <wi-datepicker ng-model="date89" qsEnabled="false"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date89" qsEnabled="false">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date89}}<hr/>

    <strong>快速选择数据：</strong><br/>
    <wi-datepicker ng-model="date88" quickSel="2000-1-10,%y-%M-01,%y-%M-%ld"></wi-datepicker><br/>
    代码："&lt;wi-datepicker ng-model="date88" quickSel="['2000-10-01','%y-%M-01','%y-%M-%ld']">&lt;/wi-datepicker>"<br/>
    选择的日期是：{{date88}}<hr/>

</div>

<script src="../../lib/My97DatePicker/WdatePicker.js"></script>
<script src="../../lib/angular.js"></script>
<script src="my97datepicker.js"></script>

<script>
    function mainCtrl($scope) {
        var vm = $scope;

        function pad(num, n) {
            return (new Array(n >(''+num).length ? (n - (''+num).length+1) : 0).join('0') + num);
        }

        for (var i = 1; i < 20; i++) {
            vm['date'+i] = '20'+pad(parseInt(Math.random()*20+1),2)+'-'+pad(parseInt(Math.random()*10+1),2)+'-'+pad(parseInt(Math.random()*28+1),2);
        }

        vm.onPickedHandler = function (data) {
            console.log(data)
        }

        vm.onClearedHandler = function (data) {
            console.log("日期被清空")
        }

    }

    angular.module('myApp',['ui.wisoft.my97datepicker'])
            .controller('mainCtrl',mainCtrl);

</script>

</body>
</html>